はじめに

こんにちは、onc-limbです！

最近TypeScriptのサーバーサイドフレームワークのhonoが気になって、色々試しに実装してみています。

今回はhonoがjsxを返せることを知り、honoだけで一つのサービスを作ろうと試みている中で、「クライアントサイドでも型セーフにjavascriptを書きたい」と思い、CSR部分だけReactを導入しようとした話です。

いや、honoだけではなくなってるやん。。。そうなんよね。

hono/jsxとReact

そもそも、honoがjsxを返せるのにどうしてReactを入れようと思ったか。

それはhonoのjsxが完全なHTMLを生成するSSRを前提として作られているから。

どう言うことか？

私は、プレースホルダーや変数が使えるHTMLが返せるよくらいで認識しました。

クライアントサイドでプログラムを動かすにはJavaScriptを組み込まなければいけないが、

動的にJacaScriptを組み込むにはDOMが必要らしい。

（ここら辺はReactエンジニアにとっては周知の内容らしいが、無知なので今後調べます。）

もちろんhono/jsxで生成するHTMLの中に直接JavaScriptをゴリゴリ書いたら、クライアントサイドで動くものはできるが、型チェックができない、状態管理ができないなど、現在において味わう必要のない苦労が発生する。

それならReactを入れてしまおうと。

Formを作ろうとしたら、型が合わない、、、？

サンプルとして、簡単なFormのバリデーションをクライアント側でさせるようにReactを導入しようとした。

やったことは単純で、下記コマンドでReactをインストールして利用するだけ。

bun add react react-dom
bun add -d @types/react @types/react-dom

しかし、実際には

<form onSubmit={handleSubmit}>・・・</form>

このよくみるformタグのonSubmitが型エラーを吐き続けてしまった。

なんでやろなーと調べた結果、formのonSubmitに渡す型が、hono/jsxとreactで異なっており、formタグではhono/jsxの定義を参照していた。（onSubmit関数はReactの型で作成していた）

これはJSXというのは同じでも、hono/jsxの作者はReactの機能は参考にしたが、コードまではみていない(見たら引っ張られてしまうから敢えて見なかった)らしい。

加えてReactは結構独自の路線を走っていて、React特有の関数や型を定義しているが(まあ、それがReactの強みでもあるが)、honoは一貫して「web標準に準拠」を貫いている。

解決方法と結論

思想の違いもあり、型定義に差分が生まれてしまうのはしょうがないが、じゃあhono/jsxとReactは一緒に使うことはできないのか。

そんなことはないはず。

Module Augmentation機能でonSubmit型だけReactの型を使用するように定義しなおせば良い。

けど、今後も競合するような関数が多くあるんだろうなーと。

そこでちゃんと調べたら、先人がライブラリを作っているではないですか。

hono/middlewareのreact-renderというライブラリが！

最初から調べればよかったと思いながら導入を考えていると、hono公式にもhono/jsx/domというものが、、、

なんとhonoがちゃんとdom上で動くライブラリを用意してくれていたのだ。

これに気づくのに数時間、仕事だったら「何やってんだオメー」となってしまうが、これはあくまで趣味なのでOK。むしろ曖昧理解だったSSR、CSRの違いやDOMの役割を勉強する機会になりました。

hono/jsx/dom具体的な導入方法はまた別で。